<template>
	<view>
		<view class="personBg">
			<image class="personBgImage" src="/static/personBg.png"></image>
		</view>
		<view style="padding-top: 180px;">
			<view class="personAvator">
				<image class="personAvator1" :src="avator"></image>
			</view>
			<view class="whiteCircleBg">
				<view style="padding-top: 70px;">
					<view class="center text-light-black-24 bold"><text>{{name}}</text> </view>

					<view class="center marginTop"><text class=" text-light-black-12 padding">
							{{info}}
						</text></view>
				</view>

				<view class="line text-light-2-black-12 marginTop">
					<view class="bigEmpty"></view>
					<view class="column">
						<view class="textblack18 bold">{{focusNum}}</view>
						<view class="margin-top-0">关注</view>
					</view>
					<view class="bigEmpty"></view>
					<view class="column">
						<view class="textblack18 bold">{{fansNum}}</view>
						<view class="margin-top-0">粉丝</view>
					</view>
					<view class="bigEmpty"></view>
					<view class="column">
						<view class="textblack18 bold">{{loveNum}}</view>
						<view class="margin-top-0">获赞</view>
					</view>
					<view class="bigEmpty"></view>
					<view class="column">
						<view class="textblack18 bold">{{productNum}}</view>
						<view class="margin-top-0">发布</view>
					</view>
					<view class="bigEmpty"></view>
					<view class="column">
						<view class="textblack18 bold">{{commentNum}}</view>
						<view class="margin-top-0">评论</view>
					</view>
					<view class="bigEmpty"></view>
					<view class="column">
						<view class="textblack18 bold">0</view>
						<view class="margin-top-0">被同款</view>
					</view>
					<view class="bigEmpty"></view>

				</view>

				<view class="line margin box-line-circle paddingSmall ">
					<view :class="{bgSeleted:typeIndex==1}" class=" paddingSmall" @click="changeType(1)">
						&nbsp;AI生成&nbsp;</view>
					<view class="bigEmpty"></view>
					<view :class="{bgSeleted:typeIndex==2}" class=" paddingSmall" @click="changeType(2)">&nbsp;帖子&nbsp;
					</view>
					<view class="bigEmpty"></view>
					<view :class="{bgSeleted:typeIndex==3}" class=" paddingSmall" @click="changeType(3)">&nbsp;合集&nbsp;
					</view>
				</view>

				<view v-show="typeIndex==2">
					<view class="padding">
						<view v-for="(item,index) in list3" :key="index" @click="postClick(item)">
							<view class="padding bgWhitecircleRect marginTop">
								<view class="line">
									<image class="imageHead" :src="item.user.avator"></image>
									<view class="marginLeft bold">{{item.user.name}}</view>
									<view class="marginLeft">{{item.createTime}}</view>
									<view class="bigEmpty"></view>

								</view>
								<view class="line marginTop" style="width: 100% ;">
									<view style="width: 100% ;">
										<view style="width: 100% ;">
											<image mode="widthFix" class="imageWorks1 round"
												:src="item.formatImages[0]">
											</image>
										</view>
										<view> </view>
									</view>
								</view>
							</view>
						</view>

					</view>


				</view>
				<view v-show="typeIndex==3">
					<view class="line-no padding">
						<view class="  item-box bigEmpty column-start   ">
							<view v-for="(item,index) in list4" :key="index" class=" bgWhitecircleRect marginBottom"
								@click="clickGroupItem(item)">
								<div class="width100 ">
									<image mode="widthFix" class="itemCircle box-image" :src="item.image" />
								</div>

								<view class="marginTop" v-show="item.name">{{item.name}}</view>
							</view>
						</view>
						<view class="  item-box bigEmpty column-start marginLeft  ">
							<view v-for="(item,index) in list5" :key="index" class=" bgWhitecircleRect marginBottom"
								@click="clickGroupItem(item)">
								<div class="width100 ">
									<image mode="widthFix" class="itemCircle box-image" :src="item.image" />
								</div>

								<view class="marginTop" v-show="item.name">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="line-no  marginRight marginLeft" v-show="typeIndex==1">
					<view class="item-box bigEmpty column-start  ">
						<view v-for="(item,index) in data" :key="index" class=" bgWhitecircleRect marginBottom"
							@click="clickItem(item)">
							<div class="width100 ">
								<image mode="widthFix" class="itemCircle box-image" :src="item.formatImages[0]" />
							</div>
							<view class="box-bottom  line textwhite10 ">
								<view class="lineStart bg-black-circle-rect-transpart-1 margin sizeItemName"
									style="z-index: 100;">
									&nbsp;
									<image class="image-head-small " :src="item.user.avator" />
									&nbsp;
									<view style="z-index: 100;" class="margin-left-0">{{item.user.name}}</view>&nbsp;
								</view>
								<view class="bigEmpty"></view>
								<view class="line bg-black-circle-rect-transpart-1 margin sizeHeigh25"
									@click.stop="love(item)" style="z-index: 100;">

									<view class="marginLeft">
										<image v-show="!item.loved" class="icon-normal " src="/static/love-white.png" />
										<image v-show="item.loved" class="icon-normal " src="/static/love-red.png" />
									</view>

									<view style="z-index: 100;" class="marginLeft marginRight">{{item.loveNum}}</view>

								</view>
							</view>
							<view class="marginTop text-light-black-10 margin-left-0 margin-right-0 ellipis-text-2"
								v-show="item.name">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="item-box bigEmpty column-start  marginLeft">
						<view v-for="(item,index) in data1" :key="index" class=" bgWhitecircleRect marginBottom"
							@click="clickItem(item)">
							<div class="width100 ">
								<image mode="widthFix" class="itemCircle box-image" :src="item.formatImages[0]" />
							</div>
							<view class="box-bottom  line textwhite10 ">
								<view class="lineStart bg-black-circle-rect-transpart-1 margin sizeItemName"
									style="z-index: 100;">
									&nbsp;
									<image class="image-head-small " :src="item.user.avator" />
									&nbsp;
									<view style="z-index: 100;" class="margin-left-0">{{item.user.name}}</view>&nbsp;
								</view>
								<view class="bigEmpty"></view>
								<view class="line bg-black-circle-rect-transpart-1 margin sizeHeigh25"
									@click.stop="love(item)" style="z-index: 100;">

									<view class="marginLeft">
										<image v-show="!item.loved" class="icon-normal " src="/static/love-white.png" />
										<image v-show="item.loved" class="icon-normal " src="/static/love-red.png" />
									</view>

									<view style="z-index: 100;" class="marginLeft marginRight">{{item.loveNum}}</view>

								</view>
							</view>
							<view class="marginTop text-light-black-10 margin-left-0 margin-right-0 ellipis-text-2"
								v-show="item.name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="uni-loadmore center" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>
<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {

				avator: "",
				name: "",
				data1: [],
				data: [],
				loading3: false,
				page3: 0,
				list3: [],
				loading4: false,
				page4: 0,
				list4: [],
				list5: [],
				loadMoreText: "加载中...",
				info: "",
				showLoadMore: false,
				loading: false,
				page: 0,
				id: 0,
				typeIndex: 1,
				productNum: 0,
				fansNum: 0,
				focusNum: 0,
				commentNum: 0,
				loveNum: 0,
				sameProductNum: 0
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: 'pages/PersonalCenter/UserCenter?id=' + this.id,
				imageUrl: this.avator
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: 'pages/PersonalCenter/UserCenter?id=' + this.id,
				imageUrl: this.avator
			}
		},
		onReady: function() {
			this.name = uni.getStorageSync("name");
			this.avator = uni.getStorageSync("avator");
			this.info = uni.getStorageSync("info");
		},
		onLoad() {
			this.initData();
			this.requestInfo()
			this.requstPostData();
			this.requstGroupData();
		},
		onUnload() {
			this.loadMoreText = "加载更多"
		},
		onReachBottom() {
			console.log("onReachBottom");
			this.setListData();
			this.showLoadMore = true;
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			clickItem(item) {
				uni.navigateTo({
					url: "/pages/PictureDetail/PictureDetail?id=" + item.id
				})
			},
			clickGroupItem(item) {
				uni.navigateTo({
					url: "/pages/PictureDetail/GroupDetail?id=" + item.id
				})
			},
			postClick(item) {
				uni.navigateTo({
					url: "/pages/PictureDetail/PostDetail?id=" + item.id
				})
			},
			requestInfo() {
				const url = getApp().globalData.apiUrl + "/api/v1/user/mine";
				const that = this;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						if (res.code == 0) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("name", res.data.name)
							uni.setStorageSync("avator", res.data.avator)
							uni.setStorageSync("level", res.data.level)
							uni.setStorageSync("vipName", res.data.vipName)
							uni.setStorageSync("vipNum", res.data.vipNum)
							uni.setStorageSync("vipTime", res.data.vipTime)
							uni.setStorageSync("productNum", res.data.productNum)
							uni.setStorageSync("fansNum", res.data.fansNum)
							uni.setStorageSync("commentNum", res.data.commentNum)
							uni.setStorageSync("loveNum", res.data.loveNum)
							uni.setStorageSync("fucusNum", res.data.fucusNum)
							uni.setStorageSync("sameProductNum", res.data.sameProductNum)
							that.name = uni.getStorageSync("name");
							that.avator = uni.getStorageSync("avator");
							that.vipName = uni.getStorageSync("vipName");
							that.vipTime = uni.getStorageSync("vipTime");
							that.productNum = uni.getStorageSync("productNum");
							that.fansNum = uni.getStorageSync("fansNum");
							that.focusNum = uni.getStorageSync("fucusNum");
							that.commentNum = uni.getStorageSync("commentNum");
							that.loveNum = uni.getStorageSync("loveNum");
							that.sameProductNum = uni.getStorageSync("sameProductNum");

							if (that.vipTime.length > 10) {
								that.vipTime = that.vipTime.substring(0, 10);
							}
							that.level = uni.getStorageSync("level")


						}
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},


			changeType(num) {
				this.typeIndex = num;
			},

			requstData() {
				const that = this;
				if (that.loading) {
					return
				}
				that.loading = true;
				const url1 = getApp().globalData.apiUrl + "/api/v1/pictureCollection/mine";
				request(url1, "GET", {
						page: that.page,
						orderType: 2,
						type: 1
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.page = that.page + 1;
						that.loading = false;
						var num = that.data.length + that.data1.length;
						if (res.data.length == 0)
							return
						for (var i = 0; i < res.data.length; i++) {
							var item = res.data[i]
							if (item.formatImages.length > 0) {
								if (num % 2 == 0) {
									that.data.push(item);
								} else {
									that.data1.push(item);
								}
								num++
							}
						}
						that.loading = false;
					}, function(err) {
						console.log('返回错误回调', err)
						that.loading = false;
					})

			},
			requstPostData() {
				const that = this;
				if (that.loading3) {
					return
				}
				that.loading3 = true;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/mine";
				request(url, "GET", {
						page: that.page3,
						orderType: 2,
						type: 3
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调post', res)
						that.page3 = that.page3 + 1;
						that.loading3 = false;
						if (res.data.length == 0)
							return
						for (var i = 0; i < res.data.length; i++) {
							that.list3.push(res.data[i]);
						}
						that.loading3 = false;
					}, function(err) {
						console.log('返回错误回调', err)
						that.loading3 = false;
					})
			},
			requstGroupData() {
				const that = this;
				if (that.loading4) {
					return
				}
				that.loading4 = true;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/mine";
				request(url, "GET", {
						page: that.page3,
						orderType: 2,
						type: 4
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调post', res)
						that.page4 = that.page4 + 1;
						that.loading4 = false;
						var num = that.data.length + that.data1.length;
						if (res.data.length == 0)
							return
						for (var i = 0; i < res.data.length; i++) {
							var item = res.data[i]

							if (num % 2 == 0) {
								that.list4.push(item);
							} else {
								that.list5.push(item);
							}
							num++

						}
						that.loading4 = false;
					}, function(err) {
						console.log('返回错误回调', err)
						that.loading4 = false;
					})
			},
			initData() {
				this.requstData()
			},
			setListData() {
				this.requstData();
			}
		}
	}
</script>

<style>
	@import url("/common/uni.css");

	.bgSeleted {
		color: #FFFFFF;
		border-radius: 40rpx;
		background-color: #000000;
	}

	.button16WhiteText {
		font-size: 16px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: #FFFFFF;
	}


	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.personBg {
		height: 200px;
		position: absolute;
		width: 100%;
		z-index: -1;
	}

	.personBgImage {
		position: absolute;
		width: 100%;
		z-index: -1;
	}

	.whiteCircleBg {

		background-color: #fff;
		border-radius: 8rpx;
	}




	
</style>